<script setup lang="ts">
import { getAd3 } from '@/api/getAxios';
import { ref } from 'vue'

const data = ref()
getAd3().then((res) => {
    data.value = showData(res.data.pos_ads_info[0].ads_info, 1)
})
const showData = function (arr: any, count: number) {
    var shuffled = arr.slice(0),
        i = arr.length,
        min = i - count,
        temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
}
</script>
<template>
    <div class="ad" v-if="data">
        <p><a :href="data[0].mqq_landing_page" target="_blank"><img :src="data[0].img" alt=""></a></p>
        <span>广告</span>
    </div>
</template>

<style scoped lang='less'>
.ad {
    width: 100%;
    margin-top: 20px;
    position: relative;

    p {
        width: 100%;

        img {
            width: 100%;
            border-radius: 4px;
            transition: all 0.2s;

            &:active {
                opacity: 0.8;
            }
        }
    }
    span{
        font-size: .8rem;
        position: absolute;
        right: 8px;
        bottom: 8px;
        color: #d9d9d9;
    }
}
</style>